<template>
  <div class="view-fill">
    <div v-if="!bindingProductInfo.visible" class="app-container-flex">
      <NewFullScreen
        v-model="showDialog"
        :title="title"
        @returnBack="returnBack"
      >
        <template v-slot:full-button>
          <el-button
            v-if="
              formInfo.data.status === 0 &&
              $permission('smartCabinetList:update')
            "
            @click="update"
            >修改</el-button
          >
          <el-button
            v-if="
              formInfo.data.status === 0 &&
              $permission('smartCabinetList:enable')
            "
            @click="enable"
            >启用</el-button
          >
          <el-button
            v-if="
              formInfo.data.status === 1 &&
              $permission('smartCabinetList:disable')
            "
            @click="disable"
            >停用</el-button
          >
          <el-button
            v-if="$permission('smartCabinetList:binding')"
            @click="binding"
            >绑定产品</el-button
          >
        </template>
        <div class="model-panel">
          <div class="model-panel-title">
            <p>{{ $t('basic_information') }}</p>
          </div>
          <div class="model-panel-body">
            <basic-information :info="formInfo" />
          </div>
        </div>
        <div class="model-panel">
          <div class="model-panel-title">
            <Tooltip text="产品信息" />
          </div>
          <div class="model-panel-body">
            <div class="flex_full_item">
              <!-- 表格 -->
              <page-table
                v-model:data="tableInfo.data"
                :pager="false"
                :tab-index="true"
                :checkBox="false"
                row-key="id"
                :field-list="tableInfo.fieldList"
                :isDynamic="true"
              >
              </page-table>
            </div>
          </div>
        </div>
      </NewFullScreen>
    </div>
    <!-- 修改或绑定产品 -->
    <bindingProduct
      v-if="bindingProductInfo.visible"
      v-model:visible="bindingProductInfo.visible"
      :title="bindingProductInfo.title"
      :type="bindingProductInfo.type"
      :id="bindingProductInfo.id"
      @returnModify="getDeatil"
    />
  </div>
</template>

<script setup name="smartCabinetListDetails">
import {
  enabledSmartCabinet,
  disabledSmartCabinet,
  getSmartCabinetListById,
  getSmartCabinetProductAll,
} from '@/api/smartCabinet'
import BindingProduct from './bindingProduct'
const { proxy } = getCurrentInstance()
const emits = defineEmits()
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  id: {
    type: String,
    default: '',
  },
})
const title = ref('智能柜详情')
// 过滤相关配置
const filterInfo = ref({
  query: {
    smartCabinetId: props.id,
  },
})
const formInfo = ref({
  data: {},
  fieldList: [
    {
      label: '智能柜名称',
      value: 'name',
    },
    {
      label: '智能柜编码',
      value: 'code',
    },
    {
      label: '智能柜类型',
      value: 'typeValue',
    },
    {
      label: '智能柜位置',
      value: 'address',
    },
    {
      label: '所属仓库',
      value: 'depotName',
    },
    {
      label: '所属部门',
      value: 'deptName',
    },
    {
      label: '客户端',
      value: 'clientName',
    },
    {
      label: '存储条件',
      value: 'storageConditionValue',
    },
    {
      label: '是否支持温湿度监控',
      value: 'temperatureHumitureMonitorValue',
    },
    {
      label: '是否定时消耗',
      value: 'autoConsumeValue',
    },
    {
      label: '消耗时间(每天)',
      value: 'consumeTime',
    },
    {
      label: '出柜消耗间隔',
      value: 'consumeIntervalTimeValue',
    },
    {
      label: '备注',
      value: 'remark',
      type: 'popover',
    },
  ],
  labelWidth: '120px',
})
// 表格相关
const tableInfo = ref({
  data: [],
  fieldList: [
    { label: '产品名称', value: 'commonName' },
    { label: '产品编码', value: 'productCode' },
    {
      label: '规格',
      value: 'standard',
    },
    {
      label: '单位',
      value: 'unitName',
    },
    {
      label: '厂家',
      value: 'brandName',
    },
    {
      label: '高水位',
      value: 'highLevel',
    },
    {
      label: '低水位',
      value: 'lowLevel',
    },
  ],
})
const bindingProductInfo = ref({
  visible: false,
  title: '',
  id: '',
  type: '',
})

const showDialog = computed({
  get() {
    return props.visible
  },
  set(val) {
    // 更新父组件visible
    emits('update:visible', val)
  },
})

onMounted(() => {
  getDeatil()
})
const returnBack = () => {
  emits('returnBack')
}
const getDeatil = () => {
  getSmartCabinetListById(props.id).then((resp) => {
    if (resp && resp.success) {
      formInfo.value.data = resp.data
    }
  })
  getList()
}
function getList() {
  getSmartCabinetProductAll(filterInfo.value.query).then((res) => {
    if (res && res.success) {
      tableInfo.value.data = res.data
    }
  })
}
function enable() {
  enabledSmartCabinet([props.id]).then((resp) => {
    if (resp && resp.success) {
      getDeatil()
    }
  })
}
function disable() {
  disabledSmartCabinet([props.id]).then((resp) => {
    if (resp && resp.success) {
      getDeatil()
    }
  })
}
// 编辑
function update() {
  bindingProductInfo.value.id = props.id
  bindingProductInfo.value.visible = true
  bindingProductInfo.value.title = '修改智能柜'
  bindingProductInfo.value.type = 'update'
}
function binding() {
  //绑定产品
  bindingProductInfo.value.id = props.id
  bindingProductInfo.value.visible = true
  bindingProductInfo.value.title = '绑定智能柜产品'
  bindingProductInfo.value.type = 'binding'
}
</script>

<style scoped></style>
